<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>装卸船记录</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div id="takeoutMain">
      <a-form-model layout="inline" :model="form" style="margin-top:0px;">
        <a-form-model-item label="箱号/封号/运单号/公司编号">
          <a-input v-model="form.codeLike" />
        </a-form-model-item>
        <a-form-model-item label="驳船船名/航次">
          <a-input v-model="form.shipNameLike" />
        </a-form-model-item>
        <a-form-model-item label="装船港口">
          <a-input v-model="form.loadingPortLike" />
        </a-form-model-item>
        <a-form-model-item label="卸船港口">
          <a-input v-model="form.unloadingPortLike" />
        </a-form-model-item>
        <a-form-model-item label="箱态">
          <a-select v-model="form.emptyOrHeavy" style="width:120px;">
            <a-select-option value>全部</a-select-option>
            <a-select-option :value="2">重箱</a-select-option>
            <a-select-option :value="1">空箱</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="持箱人">
          <a-select v-model="form.holderId" style="width:200px;">
            <a-select-option value>全部</a-select-option>
            <a-select-option
              v-for="(item,index) in holderList"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="始发港">
          <a-input v-model="form.startPortLike" />
        </a-form-model-item>
        <a-form-model-item label="目的港">
          <a-input v-model="form.endPortLike" />
        </a-form-model-item>
        <a-form-model-item label="装船日期">
          <!-- <a-range-picker @change="loadTimeChange" format="YYYY-MM-DD HH:mm"> -->
          <a-range-picker @change="loadTimeChange" format="YYYY-MM-DD">
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
        </a-form-model-item>
        <a-form-model-item label="卸船日期">
          <!-- <a-range-picker @change="unloadTimeChange" format="YYYY-MM-DD HH:mm"> -->
          <a-range-picker @change="unloadTimeChange" format="YYYY-MM-DD">
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="check">查询</a-button>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="excelExport">导出Excel</a-button>
        </a-form-model-item>
      </a-form-model>
      <a-card style="text-align:center; margin-top:24px;">
        <a-row :gutter="[16]">
          <a-col :span="6" class="assent">
            <div class="assent_mes">总箱量（个）</div>
            <div class="assent_shu">{{totalNum}}</div>
          </a-col>
          <a-col
            v-for="(v, k) in statistics"
            :key="k"
            :span="6"
            :class="(k+1)===statistics.length ? '': 'assent'"
          >
            <div class="assent_mes">{{v.containerType}}箱量（个）</div>
            <div class="assent_shu">{{v.quantity}}</div>
          </a-col>
        </a-row>
      </a-card>
      <a-table
        :columns="columns"
        :loading="loading"
        :data-source="data"
        style="margin-top:25px;"
        :scroll="{x:2500,y:600}"
        :pagination="pagination"
        :row-key="(record,index) => index"
      >
        <template slot="company" slot-scope="text, record">
          <a v-if="record.shipOrderCode" @click="company(record)">{{record.shipOrderCode}}</a>
          <span v-else>--</span>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
import { commonExport } from '@/api/request'
import { queryHolderNameList } from '@/api'
import { queryVoyageContainerRecordList } from '@/api/orderCenter'
const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '驳船船名航次',
    width: 180,
    dataIndex: 'shipVoyageName',
    customRender: (text, record, index) => {
      return record.shipVoyageName || '--'
    }
  },
  {
    title: '装船港口',
    dataIndex: 'loadingPort'
  },
  {
    title: '装船日期',
    dataIndex: 'loadingTime'
  },
  {
    title: '卸船港口',
    customRender: (text, record, index) => {
      return record.unloadingPort || '--'
    },
    dataIndex: 'unloadingPort'
  },
  {
    title: '卸船日期',
    customRender: (text, record, index) => {
      return record.unloadingTime || '--'
    },
    dataIndex: 'unloadingTime'
  },
  {
    title: '公司编号',
    width: 180,
    dataIndex: 'shipOrderCode',
    scopedSlots: {
      customRender: 'company'
    }
  },
  {
    title: '箱号',
    dataIndex: 'containerNo'
  },
  {
    title: '封号',
    dataIndex: 'containerSealNo',
    customRender: (text, record, index) => {
      return record.containerSealNo || '--'
    }
  },
  {
    title: '运单号',
    width: 150,
    dataIndex: 'seagoingShipOrderCode',
    customRender: (text, record, index) => {
      return record.seagoingShipOrderCode || '--'
    }
  },
  {
    title: '持箱人',
    dataIndex: 'holder',
    width: 200
  },
  {
    title: '始发港',
    customRender: (text, record, index) => {
      return record.startPort || '--'
    },
    dataIndex: 'startPort'
  },
  {
    title: '目的港',
    customRender: (text, record, index) => {
      return record.endPort || '--'
    },
    dataIndex: 'endPort'
  },
  {
    title: '箱型',
    dataIndex: 'containerType'
  },
  {
    title: '箱态',
    dataIndex: 'emptyOrHeavyName'
  },
  {
    title: '货名',
    dataIndex: 'goodsName',
    customRender: (text, record, index) => {
      return record.goodsName || '--'
    }
  },
  {
    title: '货重（吨）',
    dataIndex: 'goodsWeight',
    customRender: (text, record, index) => {
      return record.goodsWeight || '--'
    }
  }
]
export default {
  data () {
    return {
      holderList: [],
      form: {
        shipNameLike: '', // 驳船船名/航次
        shipid: '', // 驳船id
        codeLike: '', // 箱号/封号/运单号/公司编号
        holderId: '', // 持箱人id
        emptyOrHeavy: '', // 箱态：1空，2重
        loadingPortLike: '', // 装船港口
        unloadingPortLike: '', // 卸船港口
        startPortLike: '', // 始发港
        endPortLike: '', // 目的港
        loadingStartDate: '', // 装货开始日期
        loadingEndDate: '', // 装货结束日期
        unloadingStartDate: '', // 卸货开始日期
        unloadingEndDate: '' // 卸货结束日期
      },
      pageNum: 1,
      pageSize: 10,
      loading: true,
      data: [],
      columns,
      pagination: {},
      statistics: [],
      btnControl: {},
      totalNum: 0
    }
  },
  methods: {
    holderListRequest (e) {
      queryHolderNameList(e)
        .then(res => {
          this.holderList = res.data
        })
        .catch(rs => {})
    },
    flowListRequest (e) {
      this.loading = true
      queryVoyageContainerRecordList(e)
        .then(res => {
          // console.log(res)
          this.data = res.data.recordList.list
          let recordListStatistics = res.data.recordListStatistics
          let totalNum = 0
          recordListStatistics.forEach(v => {
            totalNum += v.quantity
          })
          this.totalNum = totalNum.toFixed(0)
          this.statistics = recordListStatistics
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.recordList.pageSize,
            total: res.data.recordList.total,
            showQuickJumper: false,
            showSizeChanger: true,
            pageSizeOptions: ['10', '30', '50', '100', '500'],
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.recordList.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.flowListRequest(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.flowListRequest(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => {
          this.loading = false
        })
    },
    loadTimeChange (date, dateString) {
      this.form.loadingStartDate = dateString[0]
      this.form.loadingEndDate = dateString[1]
    },
    unloadTimeChange (date, dateString) {
      this.form.unloadingStartDate = dateString[0]
      this.form.unloadingEndDate = dateString[1]
    },
    check () {
      this.pageNum = 1
      this.flowListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    excelExport () {
      commonExport('/order/exportVoyageContainerRecordList', {
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columns
      })
    },
    company (e) {
      window.open(`/orderCenter/order/detail/${e.orderShipId}`, '_blank')
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // console.log(this.$root._bc)
    })
    this.holderListRequest({})
    this.flowListRequest({
      ...this.form,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    })
  }
}
</script>

<style lang="less" scoped>
#takeoutMain {
  padding: 24px;
  margin: 24px;
  background: #fff;
  min-height: 700px;
}
</style>
